<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  #ul1 {
    border: 1px solid #000;
    /* overflow: hidden; */
    /* height: 30px; */
    /* margin-bottom: 30px; */

    /* display: inline-block; */
    /* float: left; */
  }

  .item {
    width: 100px;
    height: 30px;
    background: #ccc;
    /* 浮动 */
    float: left;
    /* display: inline-block;（色块有空隙） */

  }
  /* 
    （缺点）浮动后的元素脱离文档流，导致父元素没有内容 =》 【父元素高度塌陷】
      解决办法：
      1、给父元素设置overflow: hidden;
      2、给父元素设置高度（若高度不固定则不好用）
      3、给父元素设置display: inline-block;（有不明空隙，且会改变父元素的布局方式）
      4、给父元素也浮动（父元素也脱离文档流，空间释放，后面的元素会占据浮动后的父元素原本应该占据的空间）
      5、给父元素里面的最后面添加一个空【块】元素，且给这个空元素设置clear: both;
      6、.clearfix
  
  */

  /* 两者浮动都清除 */
  .last {
    clear: both;
  }

  #div1 {
    height: 50px;
    background: #f00;
  }

  /* after/before都是行元素 */
  .clearfix::after{
    content:"";
    clear: both;
    display: block;
  }

</style>
<body>
  <ul id="ul1" class="clearfix">
    <li class="item">001</li>
    <li class="item">002</li>
    <li class="item">003</li>
    <li class="item">004</li>
    <li class="item">005</li>
    <li class="item">006</li>
    <!-- <li class="last"></li> -->
  </ul>
  <div id="div1"></div>
  <ul id="ul2" class="clearfix">
    <li class="item">001</li>
    <li class="item">002</li>
    <li class="item">003</li>
    <li class="item">004</li>
    <li class="item">005</li>
    <li class="item">006</li>
    <!-- <li class="last"></li> -->
  </ul>
  <div id="div1"></div>
</body>
</html>